<template>
  <view class="main-bg">
	<z-nav-bar backState='3000' @backClick='backClick' type='transparent' :titleCenter='true' title=''></z-nav-bar>
    <public-module></public-module>
    <view class="header-gradient">
      <text class="main-title">个体工商户服务</text>
    </view>
    <view class="card-list">
      <view class="card-btn" @tap="goRegister" hover-class="card-btn-hover">
        <text>个体工商户设立登记</text>
        <view class="arrow"></view>
      </view>
      <view class="card-btn" @tap="showComingSoon" hover-class="card-btn-hover">
        <text>个体工商户变更</text>
        <view class="arrow"></view>
      </view>
      <view class="card-btn" @tap="showComingSoon" hover-class="card-btn-hover">
        <text>个体工商户注销</text>
        <view class="arrow"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
	data() {
		return {
			
		};
	},
	//第一次加载
	onLoad(e) {
		uni.hideTabBar();

	},
	//页面显示
	onShow() {
		
		uni.hideTabBar();


	},
	//方法
	methods: {
		goRegister() {
			uni.navigateTo({ url: '/pages/register' });
		},
		showComingSoon() {
			uni.showToast({ title: '敬请期待', icon: 'none' });
		},
		backClick() {
			// 处理返回事件
		},
		
	},
	//页面隐藏
	onHide() {},
	//页面卸载
	onUnload() {
		
	},
	//页面下来刷新
	onPullDownRefresh() {},
	//页面上拉触底
	onReachBottom() {},
	//用户点击分享
	onShareAppMessage(e) {
		
	}
};
</script>

<style scoped>
.main-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #6db3f2 0%, #1e69de 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.header-gradient {
  width: 100vw;
  height: 110rpx;
  background: linear-gradient(135deg, #8ec5fc 0%, #e0c3fc 100%);
  border-bottom-left-radius: 40rpx;
  border-bottom-right-radius: 40rpx;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 32rpx;
  box-shadow: 0 8rpx 24rpx rgba(30,105,222,0.08);
}
.main-title {
  font-size: 40rpx;
  color: #222;
  font-weight: bold;
  letter-spacing: 2rpx;
}
.card-list {
  width: 86vw;
  margin-top: 60rpx;
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}
.card-btn {
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 4rpx 24rpx rgba(30,105,222,0.10);
  padding: 38rpx 36rpx;
  font-size: 32rpx;
  color: #222;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.1s;
  position: relative;
  overflow: hidden;
}
.card-btn-hover {
  transform: scale(0.97);
  background: #f0f7ff;
}
.arrow {
  width: 28rpx;
  height: 28rpx;
  border-right: 4rpx solid #1e69de;
  border-bottom: 4rpx solid #1e69de;
  transform: rotate(-45deg);
  margin-left: 16rpx;
}
</style>
